/* eslint no-dupe-keys: 0 */
import { ListView } from "antd-mobile";
import React from "react";
import { getArticle } from "../../../api";
import { withRouter } from "react-router";

let pageIndex = 0;

class NewList extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    });

    this.state = {
      dataSource,
      isLoading: true
    };
  }
  goDitail(id) {
    this.props.history.push("/show/" + id);
    console.log(this.props);
  }
  componentDidMount() {
    getArticle({ page: 1 }).then(res => {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(res.data.data),
        isLoading: false
      });
    });
  }

  onEndReached = event => {
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    console.log("reach end", event);
    this.setState({ isLoading: true });
    getArticle({ page: ++pageIndex }).then(res => {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(res.data.data),
        isLoading: false
      });
    });
  };

  render() {
    let that = this;
    console.log(this);
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          height: 0,
          borderBottom: "1px solid #ECECED"
        }}
      />
    );
    const row = (rowData, sectionID, rowID) => {
      return (
        <div
          key={rowID}
          style={{ padding: "0 0.3rem" }}
          onClick={() => {
            that.goDitail(rowData.id);
          }}
        >
          <div
            style={{
              display: "flex",
              padding: "0.3rem 0"
            }}
          >
            <img
              style={{ width: "2.2rem", display:"block", height: "1.8rem", marginRight: "0.3rem" }}
              src={rowData.thumbs}
              alt=""
            />
            <div style={{  flex:1,lineHeight: 1, overflow: "hidden" }}>
              <div
                style={{
                  marginBottom: "0.16rem",
                  marginTop: "0.16",
                  fontSize: "0.32rem",
                 
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                  overflow: "hidden"
                }}
              >
                {rowData.title}
              </div>
              <div>
                <span style={{ fontSize: "0.24rem", color: "#999" }}>
                  {rowData.describe}
                </span>
              </div>
            </div>
          </div>
        </div>
      );
    };
    return (
      <ListView
        ref={el => (this.lv = el)}
        dataSource={this.state.dataSource}
        renderHeader={() => <span>新闻资讯</span>}
        renderFooter={() => (
          <div style={{ padding: 30, textAlign: "center" }}>
            {this.state.isLoading ? "加载中..." : "已经是最后一页"}
          </div>
        )}
        renderRow={row}
        renderSeparator={separator}
        className="am-list"
        pageSize={4}
        useBodyScroll
        onScroll={() => {
          console.log("scroll");
        }}
        scrollRenderAheadDistance={500}
        // onEndReached={this.onEndReached}
        onEndReachedThreshold={10}
      />
    );
  }
}

export default withRouter(NewList);
